<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Fine Water Flow</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">
      <div
        style="height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center;"
      >
        <div class="cssload-loading">
          <div class="cssload-dot"></div>
          <div class="cssload-dot2"></div>
        </div>
        <style>
          .cssload-loading {
            position: absolute;
            left: 50%;
            width: 19px;
            height: 19px;
            transform: translate(-50%, -50%);
          }
          .cssload-loading .cssload-dot {
            position: absolute;
            border-radius: 50%;
            left: 1px;
            top: 1px;
            width: 18px;
            height: 18px;
            background: rgb(0, 0, 0);
            animation: cssload-spin 2.88s 0s infinite both;
          }
          .cssload-loading .cssload-dot2 {
            position: absolute;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            background: rgb(0, 0, 0);
            animation: cssload-spin2 2.88s 0s infinite both;
          }

          @keyframes cssload-spin {
            0%,
            100% {
              box-shadow: 0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0),
                0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0),
                0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0), 0 0 0 rgb(0, 0, 0);
            }
            50% {
              transform: rotate(180deg);
            }
            25%,
            75% {
              box-shadow: 27px 0 0 rgb(0, 0, 0), -27px 0 0 rgb(0, 0, 0),
                0 27px 0 rgb(0, 0, 0), 0 -27px 0 rgb(0, 0, 0),
                19px -19px 0 rgb(0, 0, 0), 19px 19px 0 rgb(0, 0, 0),
                -19px -19px 0 #000, -19px 19px 0 #000;
            }
            100% {
              transform: rotate(360deg);
              box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000,
                0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
            }
          }

          @keyframes cssload-spin2 {
            0%,
            100% {
              box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000,
                0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
            }
            50% {
              transform: rotate(-180deg);
            }
            25%,
            75% {
              box-shadow: 51px 0 0 #000, -51px 0 0 #000, 0 51px 0 #000,
                0 -51px 0 #000, 37px -37px 0 #000, 37px 37px 0 #000,
                -37px -37px 0 #000, -37px 37px 0 #000;
              background: transparent;
            }
            100% {
              transform: rotate(-360deg);
              box-shadow: 0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000,
                0 0 0 #000, 0 0 0 #000, 0 0 0 #000, 0 0 0 #000;
            }
          }
        </style>
      </div>
    </div>
  </body>
</html>
